.top-level-nav {
  background: var(--rs-gray-900);
  position: absolute;
  width: 100vw;
  left: 0;
  top: 0;
  text-align: center;
  box-sizing: border-box;

  @media (max-width: @media-xs) {
    text-align: left;
    padding-left: 10px;
  }

  @media (min-width: @media-xs) {
    position: fixed;
    padding: 10px 0;
    width: 64px;
    left: 0;
    bottom: 0;
    z-index: 10;
  }

  &-header {
    //display: inline-block;
    float: right;

    @media (min-width: @media-xs) {
      float: none;
      margin-top: 20px;
    }

    .btn {
      &:active,
      &:focus {
        color: white;
        background: inherit;
      }
    }
  }
  &-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    text-align: center;
    display: none;

    @media (min-width: @media-xs) {
      display: block;
    }
  }
  &-footer,
  &-header {
    .rs-icon {
      color: #fff;
    }
    .rs-btn svg {
      fill: #fff;
    }
  }

  .logo-sm {
    margin-top: 9px;

    @media (min-width: @media-xs) {
      margin-top: 5px;
    }
  }

  .icon-btn-circle {
    background: none;
    border: none;
    padding: 13px;
    border-radius: 24px;
    color: #fff;
    width: 42px;
    height: 42px;
    margin-top: 3px;
    margin-bottom: 3px;

    @media (min-width: @media-xs) {
      margin-top: 0px;
      margin-bottom: 6px;
    }

    &.visible-xs {
      display: none;

      @media (min-width: @media-xs) {
        display: inline-block;
      }
    }

    &.hidden-xs {
      display: inline-block;

      @media (min-width: @media-xs) {
        display: none;
      }
    }

    .rs-icon {
      line-height: 18px;
      vertical-align: top;
    }

    &.active {
      color: var(--rs-primary-500);
    }

    &:focus {
      color: var(--rs-primary-400);
    }

    &:hover:focus {
      color: var(--rs-primary-600);
      background: transparent;
    }
  }

  .btn-nav-toggle {
    position: fixed !important;
    left: 310px;
    top: 10px;
    z-index: 6;
    box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px, rgba(9, 30, 66, 0.08) 0px 2px 4px 1px;
    transition: none;
    i {
      transition: none;
    }
    &:hover,
    &:focus,
    &:active {
      color: #fff !important;
    }
    @media (max-width: @media-xs) {
      display: none;
    }
  }
}

.DocSearch {
  --docsearch-primary-color: var(--rs-primary-500);
  --docsearch-text-color: var(--rs-text-primary);
  --docsearch-muted-color: var(--rs-text-secondary);
  --docsearch-container-background: var(--rs-bg-backdrop);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--rs-primary-500);

  // Modal
  --docsearch-modal-background: var(--rs-bg-overlay);
  --docsearch-modal-shadow: none;

  // Search box
  --docsearch-searchbox-background: var(--rs-input-bg);
  --docsearch-searchbox-focus-background: var(--rs-input-bg);

  // Footer
  --docsearch-footer-background: var(--rs-bg-overlay);
  --docsearch-footer-shadow: none;

  // Hits
  --docsearch-hit-background: var(--rs-bg-overlay);
  --docsearch-hit-color: var(--rs-primary-500);
  --docsearch-hit-active-color: var(--rs-text-heading-inverse);
  --docsearch-highlight-color: var(--rs-primary-500);
  --docsearch-hit-shadow: none;

  .DocSearch-Footer {
    border-top: 1px solid var(--rs-border-primary);
  }
  a {
    text-decoration: none !important;
  }
}
